<template>
  <div class="page">
    <global-header title="用户列表" @back="$router.back()">
      <template #right>
        <div @click="delZeroCoinUser" class="text-[13px] absolute right-[10px]">
          一键清空0分用户
        </div>
      </template>
    </global-header>
    <main class="page-main !overflow-hidden page">
      <div>
        <div class="row-between-center bg-white h-[40px]">
          <ActionSelect
            v-model:val="searchParams.action"
            title="选择排序"
            :columns="actions"
            @update="search"
          />
          <div class="text-[#E4E4E4]">|</div>
          <ActionSelect
            v-model:val="searchParams.Status"
            title="选择状态"
            :columns="status"
            @update="search"
          />
        </div>
        <div class="h-[60px] bg-white">
          <van-search
            class="search-field"
            @search="handleSearch"
            @clear="handleSearch"
            @click-left-icon="handleSearch"
            v-model="searchParams.Nickname"
            placeholder="搜索用户名/昵称/备注"
            shape="round"
          >
            <template #left-icon>
              <div class="flex items-center h-full">
                <svg-icon name="chat-search"></svg-icon>
              </div>
            </template>
          </van-search>
        </div>
        <div class="h-[10px]"></div>
        <div class="row-between-center px-[15px] bg-[#fff] h-[50px]">
          <div class="text-[14px]">是否显示0分用户</div>
          <van-switch
            v-model="searchParams.ShowZero"
            :active-value="1"
            :inactive-value="0"
            @change="search"
            size="22px"
          ></van-switch>
        </div>
        <!-- 表头 -->
        <div
          class="row-start-center text-[14px] bg-white px-[15px] text-[#888] pb-[8px] border-bottom"
        >
          <div class="flex-1 w-0 mr-[6px]">用户名</div>
          <div class="flex-1 w-0 mr-[6px]">余额</div>
          <div class="w-[70px] flex justify-center">账号状态</div>
          <div class="w-[60px] text-center">操作</div>
        </div>
      </div>
      <div class="page-main" ref="scrollRef">
        <div class="bg-white px-[15px]">
          <scroll-list
            emptyImage
            enableRefresh
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @refresh="refresh"
            @load="load"
          >
            <template v-for="(item, index) in list">
              <MemberItem
                :item="item"
                :last="index >= list.length - 2"
                @more="() => handleMore(item)"
                @status="() => handleStatus(item)"
              />
            </template>
          </scroll-list>
        </div>
      </div>
    </main>
    <!-- 更多 -->
    <MemberMorePopup ref="memberMorePopupRef" :info="memberInfo"  @updateData="refresh"/>
    <!-- 状态 -->
    <MemberStatusPopup
      ref="memberStatusPopupRef"
      :uid="memberInfo?.UserId || null"
      @update="handleUpdate"
    />
  </div>
</template>
<route>
  {
    name: "admin-user-member",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import { toast } from "@/utils/toast";
import MemberItem from "./components/member/member-item.vue";
import MemberMorePopup from "./components/member/member-more-popup.vue";
import MemberStatusPopup from "./components/member/member-status.popup.vue";

import { reqUserList, reqDelZeroCoinUser } from "@/api/user";
import { useList } from "@/hooks/useList";
import { cloneDeep, debounce } from "lodash-es";

const defaultParams = {
  action: "coin__desc",
  ShowZero: <0 | 1>1,
  Status: "-1",
  Nickname: ""
};
const searchParams = reactive({
  ...defaultParams
});
const memberMorePopupRef = ref();
const memberStatusPopupRef = ref();
const memberInfo = ref<MemberMo | null>(null);
// 排序列表
const actions = ref([
  { text: "余额降序", value: "coin__desc" },
  { text: "余额升序", value: "coin__asc" },
  { text: "会员ID降序", value: "id__desc" },
  { text: "会员ID升序", value: "id__asc" }
]);

// 状态列表
const status = ref([
  { text: "全部状态", value: "-1" },
  { text: "禁用", value: "0" },
  { text: "正常", value: "1" },
  { text: "禁言", value: "2" },
  { text: "禁止加入", value: "3" }
]);

// 获取参数
const getParams = () => {
  const [Order, By] = searchParams.action.split("__");
  const params: MemberParams = {
    Order,
    By,
    ShowZero: searchParams.ShowZero
  };
  if (searchParams.Status && searchParams.Status != "-1") {
    params.Status = searchParams.Status;
  }
  if (searchParams.Nickname) {
    params.Nickname = searchParams.Nickname;
  }
  return params;
};

// 获取列表
const { scrollRef, state, list, getData, refresh, search, load } = useList<MemberMo, MemberParams>(
  reqUserList,
  getParams
);

// 搜索 需要加防抖延时500毫秒
const handleSearch = debounce(() => {
  search();
}, 500);

// 清除零分用户
const delZeroCoinUser = () => {
  showConfirmDialog({
    message: "是否删除零分用户？",
    beforeClose: action => {
      return new Promise(async resolve => {
        if (action == "confirm") {
          try {
            await reqDelZeroCoinUser();
            toast.success("删除成功");
            search();
            resolve(true);
          } catch (error) {
            resolve(true);
          }
        } else {
          resolve(true);
        }
      });
    }
  });
};

// 点击更多操作
const handleMore = (item: MemberMo) => {
  memberInfo.value = item;
  nextTick(() => {
    memberMorePopupRef.value?.open();
  });
};

// 点击更多操作
const handleStatus = (item: MemberMo) => {
  memberInfo.value = item;
  nextTick(() => {
    memberStatusPopupRef.value?.open();
  });
};

const handleUpdate = (uid: number, status: number) => {
  const arr = cloneDeep(list.value);
  arr.forEach(jtem => {
    if (jtem.UserId == uid) {
      jtem.Status = status;
    }
  });
  list.value = cloneDeep(arr);
};

onMounted(() => {
  getData();
});
</script>
